import style from '@/pages/CarList/components/CarItem/index.module.scss'
import { carDataType } from '@/types/data'
type props = {
  carDataType: carDataType
  changeGoParticulars: (bool: boolean) => void
  goSetPitOn: (data: carDataType) => void
}
const CarItem = ({ carDataType, changeGoParticulars, goSetPitOn }: props) => {
  const { img_src, vehicle_system, car_price, down_payments, kilometre, buy_time } = carDataType

  return (
    <div
      className={style.root}
      onClick={(e) => {
        changeGoParticulars(true)
        goSetPitOn(carDataType)
      }}
    >
      <div className='sub-img-swiper'>
        <img src={`http://www.ibugthree.com/${img_src}`} alt='' className='top-img' />
      </div>
      <div className='content'>
        {/* 标题 */}
        <div className='content-title'>{vehicle_system}</div>
        {/* 参数 */}
        <div className='parameter'>
          {/* 年份 */}
          <div className='parameter-item'>2017</div>
          {/* 排量 */}
          <div className='parameter-item'>2.0T</div>
          {/* 挡位 */}
          <div className='parameter-item'>自动挡</div>
          {/* es */}
          <div className='parameter-item'>ES</div>
          {/* 舒适型号 */}
          <div className='parameter-item'>28T舒适型</div>
        </div>
        {/* 描述 */}
        <div className='describe'>
          {/* 描述项 */}
          <div className='describe-item'>{buy_time}年上牌</div>
          <div className='describe-item'>{kilometre}公里</div>
        </div>
        {/* 价格展示区 */}
        <div className='price'>
          <div className='price-sub'>{car_price}</div>
          <div className='price-unit'>万</div>
          <div className='down-payment'>首付{down_payments}万</div>
        </div>
      </div>
    </div>
  )
}
export default CarItem
